<nz-carousel [nzEffect]="effect" [nzDots]="banner.length>1" [nzAutoPlay]="true" [nzAutoPlaySpeed]="3000"
  *ngIf="banner.length">
  <div nz-carousel-content *ngFor="let index of banner"
    style="cursor: pointer;">
    <div *ngIf="index.courseId" [routerLink]="'../vd/'+index.courseId">
      <img [src]="index.imageUrl" style="display: block;width: 100%;">
    </div>
    <a *ngIf="!index.courseId && index.link" [href]="index.link" style="display: block;">
      <img [src]="index.imageUrl" style="display: block;width: 100%;">
    </a>
    <div *ngIf="!index.courseId && !index.link">
      <img [src]="index.imageUrl" style="display: block;width: 100%;">
    </div>
  </div>
</nz-carousel>
<ng-container *ngIf="httpService.devType">
  <div class="vd-wrapper">

    <div class="vd-box" style="margin-top: 30px;padding-bottom: 40px!important;">
      <div class="vd-box-header" style="margin-bottom: 20px">
        <h1 class="vd-box-title">热门课程</h1>
        <!--<div class="vd-pagination" *ngIf="courseList?.data.length > courseList?.size">-->
          <!--<nz-pagination [(nzPageIndex)]="courseList.current" [nzPageSize]="courseList.size"-->
            <!--[nzTotal]="courseList.data.length" (nzPageIndexChange)="listFilter()" nzSimple></nz-pagination>-->
        <!--</div>-->
      </div>
      <nz-list [nzDataSource]="courseList?.currentData" [nzRenderItem]="item"
        [nzGrid]="{ gutter: 16, sm: 12, md: 8, lg: 6 }">
        <ng-template #item let-item>
          <nz-list-item [nzContent]="nzContent">
            <ng-template #nzContent>
              <app-vditem [data]="item"></app-vditem>
            </ng-template>
          </nz-list-item>
        </ng-template>
      </nz-list>
      <!-- <div class="vd-box-body">
        <div *ngFor="let item of courseList">
          <app-vditem [data]="item"></app-vditem>
        </div>
        <div *ngFor="let item of courseList">
          <app-vditem [data]="item"></app-vditem>
        </div>
        <div *ngFor="let item of courseList">
          <app-vditem [data]="item"></app-vditem>
        </div>
      </div> -->
    </div>
  </div>
</ng-container>
<ng-container *ngIf="!httpService.devType">
  <div class="vd-classify-wrapper mb-classify-wrapper">
    <ul class="mb-classify vd-classify">
      <li *ngFor="let item of classifySplit();" [ngClass]="{'checked': selectedCourseName === item.name}"
        (click)="getCourseByName(item.name)"><a>{{item.name}}</a></li>
      <li *ngIf="developmentlist.length > 12" (click)="open()"><a>查看更多</a></li>
    </ul>
    <!-- <div class="vd-moreClassify" *ngIf="developmentlist.length > 18">
      <a (click)="open()">更多<i nz-icon nzType="down-square" nzTheme="outline"></i></a>
    </div> -->
  </div>

  <div class="mb-box-wrapper">
    <div class="mb-box-header">
      <h1 class="vd-box-title" style="background-image: url('../../assets/hot.png')">课程列表</h1>
    </div>
    <div class="mb-box-body">
      <nz-list [nzDataSource]="courseList?.currentData" [nzRenderItem]="item" [nzGrid]="{ gutter: 10, xs: 12 }">
        <ng-template #item let-item>
          <nz-list-item [nzContent]="nzContent">
            <ng-template #nzContent>
              <app-vditem [data]="item" [devType]="httpService.devType"></app-vditem>
            </ng-template>
          </nz-list-item>
        </ng-template>
      </nz-list>
      <div style="text-align: center">
        <button nz-button (click)="mbPagination()" nzType="default"
                *ngIf="courseList?.currentData.length < courseList?.data.length" style="margin: 30px 0;background: #D10000;color: #fff;">加载更多</button>
      </div>
    </div>
  </div>
  <div class="mb-fxied" *ngIf="visible">
    <h1>课程分类<i nz-icon nzType="close" nzTheme="outline" style="float: right;" (click)="close()"></i></h1>
    <ul class="mb-classify vd-classify" style="max-height: initial;">
      <li *ngFor="let item of developmentlist;" [ngClass]="{'checked': selectedCourseName === item.name}"
        (click)="getCourseByName(item.name)"><a>{{item.name}}</a></li>
    </ul>
  </div>
</ng-container>
